<template>
  <div style="height: 83vh;">
    <div>
      <!--    头像-->
      <a-avatar class="avater" :src="userInfo.userAva"></a-avatar>
    </div>
    <!--      个人资料-->
    <div class="right-info">
      <ul class="xqInfo">
        <li><h3>昵称:{{ userInfo.userNick }}</h3></li>
        <li><h3>账号:{{ userInfo.userName }}</h3></li>
        <li><h3>关注:{{ user.gz }}</h3></li>
        <li><h3>粉丝:{{ user.fs }}</h3></li>
        <li>
          <edit-user-info :show-visible="showEditVisible" @closeEditUserInfo="closeEditUserInfo"/>
          <edit-user-password :show-update-visible="showUpdateVisible" @closeUpdatePassword="closeUpdatePassword"></edit-user-password>
          <a-button class="edit-btn" type="primary" @click="editInfo">编辑资料</a-button>
          <a-button class="edit-btn" type="primary"  @click="updatePassword">修改密码</a-button>
        </li>
      </ul>
    </div>
    <a-divider />
  </div>
</template>

<script>
import {computed} from "vue";
import {useStore} from "vuex";
import editUserInfo from "@/components/user/editUserInfo";
import editUserPassword from "@/components/user/editUserPassword";
export default {
  components: {
    editUserInfo,
    editUserPassword
  },
  name: "selfInfo",
  //需求是 我要获取头像 那么
  // 1.从后台根据token再次获取 没必要
  // 2.存储在cookie里面
  // 3.存储在sessionStorage
  data() {
    return {
      showEditVisible: false,
      showUpdateVisible:false,
      user: {
        fs: 0,
        gz: 0
      }
    }
  },
  methods: {
    closeUpdatePassword(){
      this.showUpdateVisible=false
    },
    updatePassword(){
      this.showUpdateVisible=true
    },
    editInfo() {
      this.showEditVisible = true
    },
    closeEditUserInfo() {
      this.showEditVisible = false
    },
  },
  mounted() {
    let obj = {followersId: this.userInfo.userId}
    this.$httpPost("/xy/gz/getUserGzById", obj).then(res => {
      console.log(res.data.gzCount)
      this.user.gz = res.data.gzCount
    })
    obj = {followers_gz_id: this.userInfo.userId}
    this.$httpPost("/xy/gz/getUserFsById", obj).then(res => {
      this.user.fs = res.data.gzFsResp.fsCount
    })
  },
  setup() {
    const store = useStore()
    //获取粉丝数和关注数
    return {
      userInfo: computed(() => {
        return store.getters.getUser;
      })
    }
  },
}
</script>

<style scoped>
a {
  color: black;
}

.right-info {
  width: 680px;
  height: 200px;
  float: left;
}

.avater {
  float: left;
  width: 200px;
  height: 200px;
}

.xqInfo {
  float: left;
  margin: 25px auto 25px 10px;
  height: 150px;
}

.xqInfo li {
  height: 31px;
  width: 200px;
}

* {
  margin: 0;
  padding: 0;
}

.edit-btn {
  width: 80px;
  margin-right: 10px;
}

</style>